<!doctype html>
<html lang="zh">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    div {
      border: 1px solid red;
    }

  </style>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

  <title>Bootstrap关键概念学习</title>
</head>

<body>
  <div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
      <div class="col">
        1 of 2
      </div>
      <div class="col">
        2 of 2
      </div>
    </div>
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        4
      </div>
      <div class="col">
        5
      </div>
      <div class="col">
        6
      </div>
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        4
      </div>
      <div class="col">
        5
      </div>
      <div class="col">
        6
      </div>
      <div class="col">
        6
      </div>
      <div class="col">
        6
      </div>
    </div>
    <div class="row">
      <div class="col-9">
        1 of 2
      </div>
      <div class="col-2">
        2 of 2
      </div>
    </div>
    <div class="row">
      <div class="col-9 offset-1">
        1 of 2
      </div>

    </div>
  </div>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"></script>
</body>

</html>
